{% extends 'common/base.html' %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static 'mdeditor/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'mdeditor/css/editormd.preview.min.css' %}">
    <link rel="stylesheet" href="{% static 'mdeditor/css/style.css' %}">
{% endblock %}
{% block style %}
    <style>
        form{
            border: 30px solid #f3f3f3;
            text-align: left;
            font-family: '微软雅黑';
            padding: 10px;
        }
        form label{
            height:34px;
            line-height: 34px;
            font-size: 18px;
            font-weight: 800;
        }
        form #id_title{
            width:100%;
            height:34px;
            line-height: 34px;
        }
    .header{
        font-size:30px;
        font-weight: bold;
        padding: 10px;
    }

    </style>
{% endblock %}
{% block section %}
    <div class="header"><h1>合理化建议提交表</h1></div>
    <form class="" role="form" action="/suggest/" method="post">
        {% csrf_token %}
        {{ obj.as_p }}
        <input type="submit" value="提交" style="width:140px;height:40px;background:#a9e25c;">

    </form>
{% endblock %}
{% block script %}
    <script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
    <script>
        $(function () {
            var in_charge = $('#in_charge');
            var optionlist = $('.option-list');
            in_charge.on('input', function (value) {
                $.ajax({
                    url: '/searchUser/',
                    method: 'get',
                    data: {
                        keyword: $(this).val()
                    },
                    success: function (data) {
                        optionlist.empty();
                        optionlist.css('display', 'block');
                        users = JSON.parse(data);
                        for (var i = 0; i < users.length; i++) {
                            {#console.log(users[i].fields.username)#}
                            var username = users[i].fields.username
                            var li = $('<li>' + username + '</li>')
                            optionlist.append(li)
                        }
                    }
                })
            });
            $('.option-list').on('click', function (e) {
                var select_username = e.target.innerText
                in_charge.val(select_username)
                optionlist.hide()
            });
        })
    </script>
{% endblock %}